<template>
  <view style="height: 100vh">
    <view class="heard_top">
      <view :style="`height:${system?.statusHeight}rpx`"></view>
      <view class="poput_title" v-if="!focus">
        <view class="car_box_search_icon" @click="close">
          <image src="@/static/yunchan/chat/back.png" mode="scaleToFill"></image>
        </view>
        <view class="title_left">选择文章/视频</view>
        <view class="title_right" @click="close">取消</view>
      </view>
      <view class="car_box_search">
        <view class="car_box_search_icon" @click="handleBlur" v-if="focus">
          <image src="@/static/yunchan/chat/back.png" mode="scaleToFill"></image>
        </view>
        <view class="car_box_search_l" :style="{ margin: !focus ? '0 24rpx' : '' }">
          <u-search
            placeholder="搜索想要分享的文章/视频"
            v-model="params[3].keyword"
            bgColor="#F5F6F8"
            :showAction="false"
            :focus="focus"
            @clear="clearSearch"
            @search="toSearchPopup"
            @focus="handleFocus"
            @custom="toSearchPopup"
            actionText="搜索"
            :actionStyle="{
              color: '#967BFF',
              fontSize: '30rpx',
              lineHeight: '54rpx',
              marginRight: '35rpx',
            }"
          ></u-search>
        </view>
        <view class="car_box_search_l_btn" @click="toSearchPopup" v-if="focus">搜索</view>
      </view>
      <!-- 搜索tab -->
      <view class="search-tab" v-if="showTab && current != 3">
        <u-tabs
          :list="articletabList"
          :scrollable="false"
          lineWidth="20"
          lineHeight="3"
          :current="current"
          lineColor="#00C1B9"
          :activeStyle="{
            'font-family': ' PingFangSC, PingFang SC',
            'font-weight': 500,
            'font-size': '30rpx',
            color: '#202020',
          }"
          :inactiveStyle="{
            color: '#727272',
            'font-family': ' PingFangSC, PingFang SC',
            'font-weight': 500,
            'font-size': '30rpx',
          }"
          @click="handleChangeTab"
        ></u-tabs>
      </view>
    </view>

    <scroll-view
      class="car_box"
      @scrolltolower="listScroll"
      :scroll-y="true"
      :style="{
        height: `calc(100vh - ${276 + system?.statusHeight + 'rpx'})`,
      }"
    >
      <view v-if="showTab">
        <view
          class="trolley-box"
          @click="goItem(item)"
          v-for="item in cartTrolleyList[current]"
          :key="item?.id"
        >
          <view class="trolley-bottom">
            <view class="trolley-img">
              <image :src="item?.image?.[0] || item?.thumbnail" mode="scaleToFill" />
            </view>
            <view class="trolley-info">
              <view class="trolley-name u-line-2">{{ item?.title }}</view>
              <view class="author_box">
                <view class="author_avarat">
                  <image :src="item?.avatar" mode="scaleToFill" />
                </view>
                <view class="author_name">{{ item?.nickname }}</view>
              </view>
            </view>
            <view
              class="trolley-choose"
              :class="{ chooseTrue: item?.check, chooseFalse: !item?.check }"
              @click.stop="goodsCheckCart(item)"
            >
              <u-icon name="checkmark" size="12" color="#fff"></u-icon>
            </view>
          </view>
        </view>
      </view>
      <view v-if="cartTrolleyList?.[current]?.length == 0 && noList" class="nocontent">
        暂时没有找到相关文章/视频
      </view>
      <h-line height="180"></h-line>
      <view v-if="!showTab && !noList" class="tip_text">
        快速查找我的发布、收藏、点赞中的文章/视频
      </view>
    </scroll-view>
    <view class="trolley-totalize" v-if="cartTrolleyList?.[current]?.length > 0">
      <view
        class="trolley-choose"
        :class="{ chooseTrue: chooseAll, chooseFalse: !chooseAll }"
        @click="clickTotalizeCart"
      >
        <u-icon name="checkmark" size="12" color="#ffffff"></u-icon>
      </view>
      <view class="totalize-text1">全选</view>
      <view class="totalize-text2" v-if="chooseCount > 0">已选中{{ chooseCount }}条</view>
      <view
        class="totalize-button"
        :style="
          chooseCount > 0
            ? 'background-color:#00C1B9;color: #FFFFFF; margin: 16rpx 24rpx auto auto;'
            : 'background-color: #C5C5C5; margin: 16rpx 24rpx auto auto;'
        "
        @click="sendArticle"
        >发送</view
      >
    </view>
  </view>
</template>

<script setup lang="ts">
import { ref, defineProps, watch, onMounted } from 'vue'
import { useMemberStore, useSystemStore } from '@/stores'
import { getcollectList, getzanList, getseachList } from '@/api/popular'
import { articleLstApi } from '@/api/social'
const system = useSystemStore()
const props = defineProps({
  list: {
    type: Array,
    default: () => [],
  },
  height: {
    type: Number,
    default: 0,
  },
})
const articletabList = ref([{ name: '我的发布' }, { name: '收藏' }, { name: '点赞' }])
const chooseCount = ref(0)
const cartTrolleyList = ref([[], [], [], []])
const showTab = ref(false)
const noList = ref(false)
const current = ref(0)
const focus = ref(false)
const params = ref([
  { page: 1, limit: 10, status: 1, permission: 0, type: 2 },
  { page: 1, limit: 10 },
  { page: 1, limit: 10 },
  { page: 1, limit: 10, keyword: '' },
])
const totals = ref([0, 0, 0])
const finiseds = ref([false, false, false])
const emit = defineEmits(['close', 'sendArticle'])
function close() {
  emit('close')
}
function openArticlePopup() {
  showTab.value = true
  noList.value = true
  getselfArticleList(params.value[0])
  getCollectList(params.value[1])
  getZanlist(params.value[2])
}
async function getselfArticleList(p) {
  if (finiseds.value[0]) return
  const res = await articleLstApi(p)
  if (!res?.data?.list?.data?.length) return (noList.value = true)

  if (!cartTrolleyList.value[0].length) {
    let list = res?.data?.list?.data?.map((item) => {
      item.check = false
      return item
    })
    cartTrolleyList.value[0] = list
    totals.value[0] = res.data.list.total
  } else {
    let list = res?.data?.list?.data?.map((item) => {
      item.check = false
      return item
    })
    cartTrolleyList.value[0].push(...list)
  }
}
async function getCollectList(p) {
  if (finiseds.value[1]) return
  const res = await getcollectList(p)
  if (!res.data.data.length) return (noList.value = true)

  if (!cartTrolleyList.value[1].length) {
    let list = res?.data?.data.map((item) => {
      item.check = false
      return item
    })
    cartTrolleyList.value[1] = list
    totals.value[1] = res.data.total
  } else {
    let list = res?.data?.data.map((item) => {
      item.check = false
      return item
    })
    cartTrolleyList.value[1].push(...list)
  }
}
async function getZanlist(p) {
  if (finiseds.value[2]) return
  const res = await getzanList(p)
  if (!res.data.data.length) return (noList.value = true)

  if (!cartTrolleyList.value[2].length) {
    let list = res?.data?.data.map((item) => {
      item.check = false
      return item
    })
    cartTrolleyList.value[2] = list
    totals.value[2] = res.data.total
  } else {
    let list = res?.data?.data.map((item) => {
      item.check = false
      return item
    })
    cartTrolleyList.value[2].push(...list)
  }
}
onMounted(() => {
  openArticlePopup()
})
function sendArticle() {
  emit('sendArticle', send_list.value)
}
function clickTotalizeCart() {
  chooseAll.value = !chooseAll.value
  if (current.value != 3) {
    cartTrolleyList?.value?.[0].forEach((item) => {
      item.check = chooseAll.value
    })
    cartTrolleyList?.value?.[1].forEach((item) => {
      item.check = chooseAll.value
    })
    cartTrolleyList?.value?.[2].forEach((item) => {
      item.check = chooseAll.value
    })
    if (chooseAll.value) {
      let allTotal =
        cartTrolleyList?.value?.[0]?.length +
        cartTrolleyList?.value?.[1]?.length +
        cartTrolleyList?.value?.[2]?.length
      chooseCount.value = allTotal
      // getChceckCount()
    } else {
      chooseCount.value = 0
    }
  } else {
    cartTrolleyList?.value?.[3].forEach((item) => {
      item.check = chooseAll.value
    })
    if (chooseAll.value) {
      let allTotal = cartTrolleyList?.value?.[3]?.length
      chooseCount.value = allTotal
    } else {
      chooseCount.value = 0
    }
  }
  getChceckCount()
}
const chooseAll = ref(false)
const send_list = ref([])
function goodsCheckCart(i) {
  clickCheck(i)
}
function clickCheck(is) {
  if (current.value != 3) {
    const i = cartTrolleyList?.value?.[0].find((item1) => item1?.id == is?.id)
    if (i?.id) {
      i.check = !i.check
      if (i.check) {
        chooseCount.value++
      } else {
        chooseCount.value--
      }
    }
    const ii = cartTrolleyList?.value?.[1].find((item1) => item1?.id == is?.id)
    if (ii?.id) {
      ii.check = !ii?.check
      if (ii.check) {
        chooseCount.value++
      } else {
        chooseCount.value--
      }
    }
    const iii = cartTrolleyList?.value?.[2].find((item1) => item1?.id == is?.id)
    if (iii?.id) {
      iii.check = !iii?.check
      if (iii.check) {
        chooseCount.value++
      } else {
        chooseCount.value--
      }
    }
    let allTotal = [
      ...cartTrolleyList?.value?.[0],
      ...cartTrolleyList?.value?.[1],
      ...cartTrolleyList?.value?.[2],
    ]
    chooseAll.value = allTotal.every((item) => item.check)
    getChceckCount()
  } else {
    is.check = !is?.check
    if (is.check) {
      chooseCount.value++
    } else {
      chooseCount.value--
    }
    let allTotal = cartTrolleyList?.value?.[3]?.length
    chooseAll.value = chooseCount.value == allTotal ? true : false
    getChceckCount()
  }
}
function goItem(i) {
  console.log(i)
  uni.navigateTo({
    url: `/baby/science/index?id=${i?.id}`,
  })
}
function getChceckCount() {
  if (current.value != 3) {
    const arr1 = []
    const arr2 = []
    const arr3 = []
    cartTrolleyList?.value?.[0].forEach((item) => {
      if (item.check) {
        arr1.push(item)
      }
    })
    cartTrolleyList?.value?.[1].forEach((item) => {
      if (item.check) {
        arr2.push(item)
      }
    })
    cartTrolleyList?.value?.[2].forEach((item) => {
      if (item.check) {
        arr3.push(item)
      }
    })
    let count = uniqueObjectArray([...arr1, ...arr2, ...arr3])
    send_list.value = count
    chooseCount.value = count.length
  } else {
    const arr4 = []
    cartTrolleyList?.value?.[3].forEach((item) => {
      if (item.check) {
        arr4.push(item)
      }
    })
    send_list.value = arr4
    chooseCount.value = arr4.length
  }
}
const lastCurrent = ref(0)
function handleChangeTab(e) {
  current.value = e.index
  lastCurrent.value = e.index
  params.value[3].keyword = ''
}
function uniqueObjectArray(arr) {
  const uniqueArray = []
  arr.forEach((item) => {
    const index = uniqueArray.findIndex((i) => i.id === item.id)
    if (index === -1) {
      uniqueArray.push(item)
    }
  })
  return uniqueArray
}
function toSearchPopup() {
  getSearchList(params.value[3])
  showTab.value = true
}
async function getSearchList(p) {
  const res = await getseachList(p)
  if (!res.data.length) return (noList.value = true)
  if (!cartTrolleyList.value[3].length) {
    let list = res?.data.map((item) => {
      item.check = false
      return item
    })
    cartTrolleyList.value[3] = list
  }
}
function clearSearch() {
  current.value = lastCurrent.value
  params.value[3].keyword = ''
}
function handleFocus() {
  current.value = 3
  focus.value = true
  showTab.value = false
  noList.value = false
}
function handleBlur() {
  current.value = lastCurrent.value
  focus.value = false
  showTab.value = true
  cartTrolleyList.value[3] = []
}
function listScroll() {
  if (cartTrolleyList.value[current.value].length == totals.value[current.value]) {
    finiseds.value[current.value] = true
  } else {
    params.value[current.value].page++
    switch (current.value) {
      case 0:
        getselfArticleList(params.value[0])
        break
      case 1:
        getCollectList(params.value[1])
        break
      case 2:
        getZanlist(params.value[2])
        break
    }
  }
}
</script>

<style lang="scss" scoped>
.heard_top {
  background: #ffffff !important;
  .poput_title {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 100rpx;
    background: #ffffff;
    padding: 0 24rpx;
    .car_box_search_icon {
      width: 38rpx;
      height: 38rpx;
      image {
        width: 38rpx;
        height: 38rpx;
      }
    }
    .title_left {
      font-family: PingFangSC, PingFang SC;
      font-weight: 400;
      font-size: 36rpx;
      color: #202020;
    }
    .title_right {
      font-family: PingFangSC, PingFang SC;
      font-weight: 400;
      font-size: 30rpx;
      color: #5c5c5c;
    }
  }
  .car_box_search {
    width: 750rpx;
    height: 88rpx;
    background: #ffffff;
    box-sizing: border-box;
    // padding: 30rpx 0 20rpx 30rpx;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    .car_box_search_icon {
      margin-left: 24rpx;

      width: 38rpx;
      height: 38rpx;
      image {
        width: 38rpx;
        height: 38rpx;
      }
    }

    .car_box_search_l {
      flex: 1;
      display: flex;
      flex-wrap: wrap;
      justify-content: space-between;
      width: 564rpx;
      height: 70rpx;
      background: #f5f6f8;
      border-radius: 35rpx;
      border-radius: 32rpx;
    }
    .car_box_search_l_btn {
      width: 111rpx;
      height: 64rpx;
      border-radius: 27rpx 27rpx 27rpx 27rpx;
      font-family: PingFang SC, PingFang SC;
      font-weight: 500;
      font-size: 30rpx;
      color: #00c1b9;
      line-height: 64rpx;
      text-align: center;
      margin-left: 10rpx;
    }
  }

  .search-tab {
    width: 750rpx;
    height: 88rpx;
    background: #ffffff;
    line-height: 88rpx;
    // display: flex;
    // // justify-content: space-between;
    // align-items: center;
    // width: 100%;
    // height: 88rpx;
    // background: #ffffff;
  }
}
::v-deep .tabs__wrapper__nav__line {
  bottom: 10rpx;
}
.nocontent {
  margin-top: 180rpx;
  font-family: PingFangSC, PingFang SC;
  font-weight: 400;
  font-size: 26rpx;
  color: #aaaaaa;
  text-align: center;
}
.tip_text {
  font-family: PingFang SC, PingFang SC;
  font-weight: 500;
  font-size: 24rpx;
  color: #999999;
  text-align: center;
}
.car_box {
  // padding-bottom: 20rpx;
  height: 80vh;
  overflow-y: scroll;
  // #ifdef APP-PLUS || APP-IOS || APP-ANDROID
  // padding-bottom: 173rpx;
  /* #endif */
}
.trolley-box {
  width: 702rpx;
  height: 200rpx;
  background: #ffffff;
  border-radius: 20rpx;
  margin: 0 24rpx 20rpx;
  overflow: hidden;
  display: flex;
  justify-content: space-between;
  padding: 20rpx;
  .trolley-bottom {
    display: flex;
    align-items: center;

    .trolley-choose {
      margin-left: 30rpx;

      width: 34rpx;
      height: 34rpx;
      border-radius: 50%;
      background: #fff;
      border: 2rpx solid #c5c5c5;
      display: flex;
      justify-content: center;
      align-items: center;
    }

    .chooseTrue {
      border-color: #00c1b9;
      background: #00c1b9;
    }
    .chooseFalse {
      border-color: #e8e8e8;
      background: #e8e8e8;
    }
    .trolley-img {
      width: 160rpx;
      height: 160rpx;
      border-radius: 10rpx;
      position: relative;

      image {
        width: 160rpx;
        height: 160rpx;
        background: #d8d8d8;
        border-radius: 10rpx;
      }

      .trolley-img_none {
        position: absolute;
        top: 0;
        left: 0;
        width: 190rpx;
        height: 190rpx;
        border-radius: 16rpx;
        background: rgba(113, 129, 140, 0.8);
        font-family: PingFang SC, PingFang SC;
        font-weight: 500;
        font-size: 28rpx;
        color: #ffffff;
        line-height: 190rpx;
        text-align: center;
      }
    }

    .trolley-info {
      width: 418rpx;
      align-self: start;
      display: flex;
      flex-direction: column;
      margin-left: 20rpx;
      justify-content: space-between;
      .trolley-name {
        font-family: PingFangSC, PingFang SC;
        font-weight: 500;
        font-size: 26rpx;
        color: #202020;
      }
      .author_box {
        margin-top: 36rpx;
        display: flex;
        align-items: center;
        .author_name {
          font-family: PingFangSC, PingFang SC;
          font-weight: 400;
          font-size: 26rpx;
          color: #5c5c5c;
        }
        .author_avarat {
          margin-right: 10rpx;
          width: 50rpx;
          height: 50rpx;
          background: #d8d8d8;
          border-radius: 50%;
          image {
            width: 50rpx;
            height: 50rpx;
            background: #d8d8d8;
            border-radius: 50%;
          }
        }
      }
    }

    .trolley-detail {
      width: 395rpx;
      height: 190rpx;
      background: #f6fbff;
      border-radius: 8rpx;

      .trolley-detail_t {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
        padding: 10rpx;

        .trolley-detail_t_l {
          font-family: PingFang SC, PingFang SC;
          font-weight: 500;
          font-size: 24rpx;
          color: #333333;
          line-height: 28rpx;
        }

        image {
          width: 30rpx;
          height: 30rpx;
        }
      }

      .trolley-detail_b {
        padding: 10rpx;
        overflow: hidden;

        .trolley-detail_b_img {
          float: left;
          width: 118rpx;
          height: 118rpx;
          border-radius: 8rpx;
        }

        .trolley-detail_b_r {
          width: 233rpx;
          float: left;
          margin-left: 20rpx;

          .trolley-detail_b_r_t {
            width: 208rpx;
            height: 28rpx;
            font-family: PingFang SC, PingFang SC;
            font-weight: 500;
            font-size: 26rpx;
            color: #333333;
            line-height: 28rpx;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
          }

          .trolley-detail_b_r_b {
            padding-top: 50rpx;
            display: flex;
            flex-wrap: wrap;
            justify-content: space-between;

            .trolley-detail_b_r_b_l {
              font-family: PingFang SC, PingFang SC;
              font-weight: 500;
              font-size: 28rpx;
              color: #de272a;
              line-height: 32rpx;

              text {
                font-size: 20rpx;
              }
            }

            .trolley-detail_b_r_b_r {
              width: 32rpx;
              height: 32rpx;
            }
          }
        }
      }
    }
  }
}
.trolley-totalize {
  position: fixed;
  z-index: 99;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 168rpx;
  background: #ffffff;
  display: flex;
  overflow: hidden;

  .trolley-choose {
    width: 36rpx;
    height: 36rpx;
    border-radius: 50%;
    background: #ffffff;
    border: 2rpx solid #cfcfcf;
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 32rpx 10rpx auto 24rpx;
  }

  .chooseTrue {
    border-color: #00c1b9;
    background: #00c1b9;
  }
  .chooseFalse {
    border-color: #e8e8e8;
    background: #e8e8e8;
  }

  .totalize-text1 {
    font-family: PingFangSC, PingFang SC;
    font-weight: 400;
    font-size: 26rpx;
    color: #5c5c5c;
    margin-top: 32rpx;
  }

  .totalize-text2 {
    font-family: PingFangSC, PingFang SC;
    font-weight: 400;
    font-size: 26rpx;
    color: #5c5c5c;
    margin: 32rpx 0 0 306rpx;
  }

  .totalize-button {
    width: 160rpx;
    height: 68rpx;
    border-radius: 34rpx;
    text-align: center;
    font-family: PingFangSC, PingFang SC;
    font-weight: 400;
    font-size: 30rpx;
    color: #aaaaaa;
    line-height: 68rpx;
    margin-top: 16rpx;
  }
}
</style>
